<template>
  <div>
    <div class="mycenter-box">
      <van-image round width="4rem" height="4rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
      <div class="topmucenter">
          <div>
              <p>{{$store.state.info.name}}</p>
              <p>{{phoneFun($store.state.info.phone)}}</p>
          </div>
          <div  @click="toUserinfo">
              <span>完善资料</span>
              <van-icon name="arrow" style="vertical-align: -10%"/>
          </div>
      </div>
    </div>
    <div>
      <van-cell :title="value.totltle" is-link :to="value.topath" v-for="(value,index) in celllist" :key="index" :icon="value.icon" size="40px"/>
      <div style="display: flex;flex-direction: row;justify-content: space-between;padding: 10px 16px;font-size: 14px">
        <div>当前版本</div>
        <div>
          <van-tag type="primary" size="medium">1.0.2v</van-tag>
        </div>
      </div>
      
    </div>
    <div class="quitinfo">
      <van-button color="linear-gradient(to right, #74b4f5, #1989fa)" round block>退出账户</van-button>
    </div>
    <!-- 弹出框 -->
    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
    <van-popup round closeable v-model="contentshow" :close-on-click-overlay="false">
      <div class="poplogin">
          <div class="message">登录账号即可体验完整版内容</div>
          <div>
            <van-button type="info" plain round @click="tologin">去登录</van-button>
          </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Icon,Image ,Cell, CellGroup ,Button ,Tag} from "vant";
import { userInfo } from 'os';
export default {
    data(){
        return{
            name:"游客",
            phone:'15865102492',
            celllist:[
              {totltle: "我的收藏" ,icon:"like", topath:"/search"},
              {totltle: "历史足迹" ,icon:"eye", topath:"/exercises"},
              {totltle: "检测报告" ,icon:"printer",topath:"/filepage"},
              {totltle: "疾病调查问卷" ,icon:"column",topath:"/home"},
              {totltle: "我的预约信息" ,icon:"todo-list",topath:"/home"},
              {totltle: "分享好友" ,icon:"share",topath:"/login"},
              {totltle: "问题反馈" ,icon:"question",topath:"/search"},
              {totltle: "关于软件" ,icon:"weapp-nav",topath:"/page"}
            ],
            contentshow: false,
        }
    },
  components: {
    [Image.name]: Image,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Tag.name] : Tag
  },
  created(){
      if(!localStorage.getItem('userInfo')){
          this.contentshow = true;
      }
  },
  mounted(){

  },
  methods:{
      phoneFun(str){
            let pre =  str.substr(0,3);
            let next = str.substr(7,4);
            return pre + '****' + next;
      },
      tologin(){
        this.$router.replace({name:"login"})
      },
      toUserinfo(){
        this.$router.replace({name:"userinfo"})
      }
  }
};
</script>
<style scoped lang="less">
.mycenter-box {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #00b7ff; /* 不支持线性的时候显示 */
  background-image: linear-gradient(to bottom right, #74b4f5, #00a1fe);
}
.topmucenter{
  display: flex;
  width: 78%;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 12px;
}
.quitinfo{
  padding: 12px;
}
.poplogin{
  width: 210px;
  padding: 40px 16px 20px 16px;
  text-align: center;
  .message{
    line-height: 32px;
  }
}
</style>